#Screen

<ShopMainScreen>:
    MDBoxLayout:
        orientation:'vertical'

        MDToolbar:
            title:'Shop'
            right_action_items: [["cart", lambda x: root.switchToChkOut()]]
            left_action_items: [["arrow-left", lambda x: root.switchBack()]]
            
        MDTabs:
            id:tabShop
            allow_stretch:True
            
            TabShopIngredients:
            
            TabShopDevices:
        


<CheckOutScreen>:
    MDBoxLayout:
        orientation:'vertical'

        MDToolbar:
            title:'Check Out'
            left_action_items: [["arrow-left", lambda x: root.switchBack()]]

        ScrollView:
            do_scroll_x:False
            MDGridLayout:
                id:ChkOutLayout
                cols:1
                padding:['35dp','35dp','35dp','35dp']
                spacing:'15dp'
                size_hint_y:1 #CHANGE HERE UPON ADDING/DELETING ITEMS
         

<ShopItemScreen>:
    title:'title'
    originalPrice:'op'
    actualPrice:'ap'
    descriptionInDetail:'description in detail'
    itemType:0 # 0 for ingredients, 1 for devices
    itemNo:0  # ingredients and devices' num are separated.  

    MDBoxLayout:
        orientation:'vertical'
        size_hint_y: 1
        spacing:'15dp'
    
        MDToolbar:
            title:''
            right_action_items: [["cart", lambda x: root.switchToChkOut()]]
            left_action_items: [["arrow-left", lambda x: root.switchBack()]]
        MDSwiper:
            height:root.height/3
            size_hint_y: None

            MDSwiperItem:
                FitImage:
                    source: 'guitar.png'
                    allow_stretch:True
                    radius:[20,]

            MDSwiperItem:
                FitImage:
                    source: 'guitar.png'
                    allow_stretch:True
                    radius:[20,]
            MDSwiperItem:
                FitImage:
                    source: 'guitar.png'
                    allow_stretch:True
                    radius:[20,]

        ScrollView:
            size: self.size
            do_scroll_x:False  

            MDGridLayout:
                id:tabIngGrid
                cols:1
                padding:['35dp','35dp','35dp','35dp']
                spacing:'35dp'
                size_hint_y:1.5

                MDSeparator:

                MDLabel:
                    halign:'left'
                    font_syle:'H6'
                    text:root.title

                MDSeparator:

                MDBoxLayout:

                    MDLabel:
                        halign:'left'
                        font_style:'H6'
                        markup:True
                        text:'[color=b3424a][s][b]'+root.originalPrice+'[/color][/s][/b]  '+root.actualPrice

                    MDBoxLayout: 
                    #ControlBar
                        size_hint_x:0.5
                        halign:'right'
                        spacing:'10dp'
                        MDIconButton:
                            icon: "minus"
                            pos_hint:{"center_y": 0.5}
                            on_press: root.itemRemoveOne_(root.itemType, root.itemNo)
                        MDLabel:
                            id:itemCountDisplay
                            text: '0'
                            halign: "center"
                        MDIconButton:
                            icon: "plus"
                            pos_hint:{"center_y": 0.5}
                            on_press: root.itemAddOne_(root.itemType, root.itemNo)


                MDSeparator:

                MDLabel:
                    halign:'left'
                    font_style:'Body2'
                    markup:True
                    line_height:1.5
                    text:'[color=505050][b]Description:[/b]\n'+root.descriptionInDetail+'[/color]'
                

       
    

<FinalScreen>:
    MDBoxLayout:
        pos_hint: {'center_x': 0.5,'center_y':0.5}

        orientation:'vertical'
        padding:['35dp','35dp','35dp','35dp']
        spacing:'100dp'

        FitImage:
            halign:'center'
            size_hint_x:1
            size_hint_y:0.0874
            #pos_hint: {'center_x': 0.5,'center_y':0.5}
            source:'devices01.jpg'
            allow_stretch:True

        Button:
            halign:'center'
            background_color:[0.13,0.59,0.95,1]
            background_normal:''
            size_hint:(1,0.015)
            text:'Back to Main'
            font_style:'H1'
            pos_hint: {'center_x': 0.5,'center_y':0.35}
            on_release:
                root.parent.transition.direction = 'right'
                root.parent.current = 'scrMain'
    



#Widgets

<TabShopIngredients>:
    text:'Ingredients'

    MDBoxLayout:
        orientation:'vertical'
        ScrollView:
            size: self.size
            do_scroll_x:False
            MDGridLayout:
                id:tabIngGrid
                cols:1
                padding:['35dp','35dp','35dp','35dp']
                spacing:'35dp'
                size_hint_y:1.5 #CHANGE HERE UPON ADDING/DELETING ITEMS
                ShopCard:
                    imgPath:'shopImgs/ingredients01.jpg'
                    title:'i1'
                    description:'test'
                    originalPrice:'$99.99'
                    actualPrice:'$50'
                    on_release:root.switchToDetail('name')


                ShopCard:
                    imgPath:'shopImgs/ingredients02.jpg'
                    title:'i2'
                    description:'test test'
                    originalPrice:'$199.99'
                    actualPrice:'$100'

                ShopCard:
                    imgPath:'shopImgs/ingredients03.jpg'
                    title:'i3'
                    description:'test test test'
                    originalPrice:'$999.99'
                    actualPrice:'$25'

                ShopCard:
                    imgPath:'shopImgs/ingredients01.jpg'
                    title:'i1-2'
                    description:'test'
                    originalPrice:'$99.99'
                    actualPrice:'$50'

                ShopCard:
                    imgPath:'shopImgs/ingredients02.jpg'
                    title:'i2-2'
                    description:'test test'
                    originalPrice:'$199.99'
                    actualPrice:'$100'
            

<TabShopDevices>:
    text:'Devices'
    MDBoxLayout:
        orientation:'vertical'
        ScrollView:
            size: self.size
            do_scroll_x:False
            MDGridLayout:
                cols:1
                padding:['35dp','35dp','35dp','35dp']
                spacing:'35dp'
                size_hint_y:1.2 #CHANGE HERE UPON ADDING/DELETING ITEMS
                ShopCard:
                    imgPath:'shopImgs/devices01.jpg'
                    title:'d1'
                    description:'test devices'
                    originalPrice:'$1999.99'
                    actualPrice:'$500'

                ShopCard:
                    imgPath:'shopImgs/devices03.jpg'
                    title:'d2'
                    description:'test test test devices'
                    originalPrice:'$199.99'
                    actualPrice:'An Pin Le Dao'   
                
                ShopCard:
                    imgPath:'shopImgs/devices02.jpg'
                    title:'d3'
                    description:'test test devices'
                    originalPrice:'$9999.99'
                    actualPrice:'$1000'

                ShopCard:
                    imgPath:'shopImgs/devices01.jpg'
                    title:'d1-2'
                    description:'test devices'
                    originalPrice:'$999.99'
                    actualPrice:'$500'



<ShopCard>:
    padding:'0dp'
    spacing:'25dp'
    radius:'0dp'
    ripple_behavior:True

    imgPath:''
    title:'default title'
    description:'default description'
    actualPrice:'actual price'
    originalPrice:'original price'

    orientation:'vertical'
    itemType:0
    itemNo:0

    MDBoxLayout:
        spacing:'35dp'
        pos_hint:{'x':0}
        Image:
            allow_stretch:True
            size_hint_x: 1
            size_hint_y: 1
            pos_hint:{'x':0}
            source:root.imgPath

        MDBoxLayout:
            orientation:'vertical'
            MDLabel:
                halign:'left'
                text:root.title
                font_style:'Subtitle2'
            MDLabel:
                halign:'left'
                font_style:'Caption'
                text:root.description
            MDLabel:
                halign:'left'
                font_style:'Caption'
                markup:True
                text:'[color=b3424a][s][b]'+root.originalPrice+'[/color][/s][/b]  '+root.actualPrice
            



<ChkOutCard>:
    padding:'0dp'
    spacing:'25dp'
    radius:'0dp'
    ripple_behavior:True

    imgPath:'guitar.png'
    title:'default title'
    actualPrice:2
    quantity:3

    orientation:'vertical'
    itemType:0
    itemNo:0

    MDBoxLayout:
        spacing:'35dp'
        pos_hint:{'x':0}
        Image:
            allow_stretch:True
            size_hint_x: 1
            size_hint_y: 1
            pos_hint:{'x':0}
            source:root.imgPath

        MDBoxLayout:
            orientation:'vertical'
            MDLabel:
                halign:'left'
                text:root.title
                font_style:'Subtitle1'

            MDLabel:
                halign:'left'
                font_style:'Caption'
                text:'$'+str(root.actualPrice*root.quantity)+' / '+str(root.quantity)+' pcs'
    